<template>
  <div class="detail-container">
    <div style="padding: 16px 0">
      <el-page-header @back="goBack" :content="headerTitle"></el-page-header>
    </div>
    <!-- 顶部选项卡 -->
    <el-tabs v-model="activeTab" class="detail-tabs">
      <el-tab-pane label="基础信息" name="basic">
        <basic />
      </el-tab-pane>
      <!-- <el-tab-pane label="推广费记录" name="promotion">
        <promotion />
      </el-tab-pane> -->
      <!-- <el-tab-pane label="推广成员" name="members">
        <members />
      </el-tab-pane> -->
      <!-- <el-tab-pane label="诚信信记录" name="credit">
        <credit />
      </el-tab-pane> -->
      <!-- <el-tab-pane label="投诉记录" name="complaint"></el-tab-pane> -->
      <!-- <el-tab-pane label="信息费记录" name="infoFee"></el-tab-pane> -->
      <!-- <el-tab-pane label="信息费抵扣额记录" name="deduction">
        <deduction />
      </el-tab-pane> -->
      <!-- <el-tab-pane label="评价记录" name="evaluation">
        <evaluation />
      </el-tab-pane> -->
    </el-tabs>
  </div>
</template>

<script>
import basic from "./common/basic.vue";
import members from "./common/members.vue";
import credit from "./common/credit.vue";
import deduction from "./common/deduction.vue";
import evaluation from "./common/evaluation.vue";
import promotion from "./common/promotion.vue";
export default {
  components: {
    basic,
    members,
    credit,
    deduction,
    evaluation,
    promotion,
  },
  data () {
    return {
      activeTab: "basic",
      headerTitle: "用户详情",
    };
  },
  methods: {
    goBack () {
      this.$router.go(-1); //  go()后退+刷新 back()后退
    },
  },
};
</script>

<style scoped lang="scss">
.detail-container {
  padding: 20px;
  background-color: #f5f7fa;

  .detail-tabs {
    background-color: #fff;
    padding: 20px;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
}
</style>
